<template>
  <div id="box">
<!--    <div id="search">-->
<!--      <el-form :inline="true" class="demo-form-inline">-->
<!--        <el-form-item label="菜单名称">-->
<!--          <el-input placeholder="请输入菜单名" v-model="authName"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="searchAuth" icon="el-icon-search">搜索</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
    <div id="header-bth">
      <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="showAddAuthForm">新增
      </el-button>
    </div>
    <div id="auth-table">
      <el-table
          ref="tableList"
          :data="tableData"
          height="400px"
          style="width: 100%;"
          row-key="id">
        <el-table-column
            prop="title"
            label="菜单名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="icon"
            label="图标"
            width="180">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column
            prop="permission"
            label="权限标识">
        </el-table-column>

        <el-table-column
            prop="model"
            label="模块名称">
        </el-table-column>
        <el-table-column
            prop="path"
            label="组件路由">
        </el-table-column>
        <el-table-column
            prop="component"
            label="组件名称">
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-popconfirm title="确定删除吗？" @confirm="deleteConfirm(scope.$index, scope.row)">
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加 编辑权限信息弹窗-->
    <el-dialog :title="title" :visible.sync="addAuthFormVisible" width="40%" @close="handleClear">
      <el-form :model="authForm" ref="authInfo" :rules="authRules" label-width="80px" size="medium"
               label-position="left">
        <el-input v-model="authForm.id" autocomplete="off" v-show="false"></el-input>
        <el-form-item label="上级菜单" prop="pid">
          <el-select v-model="authForm.pid" ref="select" placeholder="请选择" style="width: 100%">
            <el-option key="id" hidden :value="id" :label="label"></el-option>
            <el-tree ref="tree"
                     style="padding: 0px 10px 10px 0px"
                     :data="list"
                     :expand-on-click-node="false"
                     node-key="id"
                     :default-expand-all="true"
                     @node-click="handleCheck"
            >
            </el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" prop="isMenu">
          <el-radio-group v-model="authForm.isMenu">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="authForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="目录图标" prop="icon" v-if="authForm.isMenu==0">
          <!--图标选择器-->
          <e-icon-picker v-model="authForm.icon"/>
        </el-form-item>

        <el-form-item label="权限标识" prop="permission" v-if="authForm.isMenu==2">
          <el-input v-model="authForm.permission" autocomplete="off" placeholder="按钮权限标识"></el-input>
        </el-form-item>

        <el-form-item label="组件名称" prop="component" v-if="authForm.isMenu==1">
          <el-input v-model="authForm.component" autocomplete="off" placeholder="菜单组件名称"></el-input>
        </el-form-item>


        <el-form-item label="模块名称" prop="model" v-if="authForm.isMenu==1">
          <el-input v-model="authForm.model" autocomplete="off" placeholder="菜单路径"></el-input>
        </el-form-item>

        <el-form-item label="组件路径" prop="path" v-if="authForm.isMenu==1">
          <el-input v-model="authForm.path" autocomplete="off" placeholder="菜单路径"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAuthInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  addPermissionList,
  deletePermission,
  getOnePermission,
  permissionList,
  search,
  treeList
} from "@/api/permission";
import {listToTree} from "@/utils/treeUtil";

export default {
  name: "AuthorityView",
  data() {
    return {
      authName: '',
      title: '',
      tableData: [],
      authForm: {
        isMenu: 0,
        pid: '',
      },
      menuType: 0,
      label: '',
      id: '',
      list: [],
      addAuthFormVisible: false,
      authRules: {
        pid: [
          {required: true, message: '请选择父菜单', trigger: 'blur'}
        ],
        isMenu: [
          {required: true, message: '请填写类型', trigger: 'blur'}
        ],
        title: [
          {required: true, message: '请填写名称', trigger: 'blur'}
        ]
      }
    }

  },
  methods: {
    //搜所权限
    // searchAuth() {
    //   //  发送异步请求 查询权限信息
    //   search (this.authName).then(response => {
    //     if (response.code == 0) {
    //       this.tableData = listToTree(response.data.permissionList)
    //     }
    //   })
    // },
    // 删除权限
    deleteConfirm(index, row) {
      let id = row.id

      deletePermission(id).then(res => {
        if (res.code === 0) {
          this.$message.success(res.message)
          this.toTree()
        }
      })

    },
    showAddAuthForm() {
      this.title = '添加菜单'
      this.addAuthFormVisible = true
      this.selectTree()
    },

    selectTree() {  // 渲染下拉选的树形结构
      //筛选权限中的目录 和菜单权限
      treeList().then(response => {
        if (response.code == 0) {
          let {data} = response  // {code,message,data}
          console.log('treeList data:', data);
          let dt = data.permissionList.filter(permissionList => permissionList.isMenu!=2)
              .map(permissionList => {
                return {
                  id: permissionList.id,
                  pid: permissionList.pid,
                  label: permissionList.title
                }
              })

          let selectMenu  = {
            id: 0,
            pid:-1,
            label:'主类目',
            children:listToTree(dt)
          }
          this.list = [selectMenu]
        }
      })

    },
    handleCheck(val) {
      // 点击节点获取 名称 赋值给label 显示在ei-options中
      this.label = val.label
      this.id = val.id
      this.authForm.pid = val.id
      // 选择完毕关闭 下拉选
      this.$refs.select.blur()
    },
    // 关闭弹窗  清除验证规则
    handleClear() {
      this.authForm = {
        isMenu: 0
      }
      this.$refs.authInfo.clearValidate()
      this.toTree()
    },
    // 编辑权限
    handleEdit(index, row) {
      this.title = "编辑菜单"
      this.addAuthFormVisible = true
      this.selectTree()
      // 根据id 查询权限信息 处理父菜单信息展示
      getOnePermission(row.id).then(response=>{
        let {data} = response
        let permission = data.permission
        let title = data.parentTitle
        if (permission.pid!=0){
          this.authForm = permission;
          this.id = permission.pid
          this.label = title
        }else {
          this.authForm = permission
          this.id = 0
          this.label = "主类目"
        }
      })



    },
    addAuthInfo() {
      this.$refs.authInfo.validate(valid => {
        if (!valid) {
          this.$message.warning("请填写完整的信息")
          return
        }
        // 发送异步请求 添加菜单信息  this.authForm
        addPermissionList(this.authForm).then(res => {
          if (res.code === 0) {
            this.$message.success(res.message)
            this.addAuthFormVisible=false
            this.toTree()
          }
        })



      })
    },

    toTree() {
      // 加载权限列表
      permissionList().then(response => {
        if (response.code == 0) {
          this.tableData = listToTree(response.data.permissionList)
        }
      })
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  created() {
    this.toTree()
  }
}
</script>

<style scoped>
#box {
  width: 95%;
  margin: 5px auto 0;
}

#search {
  width: 100%;
  height: 50px;
  padding-bottom: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

#header-bth {
  margin-bottom: 15px;
}

</style>